<template>
	<div class="animated bounceInDown sele_none">
		<el-row>
			<el-col :span="24">
				<div class="separate_page">
					<h3>用户统计</h3>
					<div v-loading="memberLoading" element-loading-background="rgba(255, 255, 255, 0.8)"
						class="dflex animated bounceInDown">
						<div class="tag">
							<i class="iconfont iconguanli_zongyonghu"></i>
							<div>
								<div class="tag_title">总用户数</div>
								<v-countup class="tag_data" start-value="0" :end-value="memberSta.member_cnt">
								</v-countup>
							</div>
						</div>
						<div class="tag">
							<i class="iconfont iconjin7tian"></i>
							<div>
								<div class="tag_title">近7天新增量</div>
								<v-countup class="tag_data" start-value="0" :end-value="memberSta.member_cnt_7">
								</v-countup>
							</div>
						</div>
						<div class="tag">
							<i class="iconfont iconzuori"></i>
							<div>
								<div class="tag_title">昨日新增量</div>
								<v-countup class="tag_data" start-value="0" :end-value="memberSta.member_cnt_yesterday">
								</v-countup>
							</div>
						</div>
						<div class="tag">
							<i class="iconfont iconjinri"></i>
							<div>
								<div class="tag_title">今日新增量</div>
								<v-countup class="tag_data" start-value="0" :end-value="memberSta.member_cnt_today">
								</v-countup>
							</div>
						</div>
						<div class="tag">
							<i class="iconfont iconpay"></i>
							<div>
								<div class="tag_title">今日付款数</div>
								<v-countup class="tag_data" start-value="0" :end-value="memberSta.pay_cnt"></v-countup>
							</div>
						</div>
						<div class="tag">
							<i class="iconfont iconxiaofei1"></i>
							<div>
								<div class="tag_title">今日总消费</div>
								<v-countup class="tag_data" start-value="0" :end-value="memberSta.pay_money"
									:decimals="2"></v-countup>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="16">
			<el-col :span="5">
				<div class="separate_page area2">
					<h3>订单统计</h3>
					<div v-loading="orderLoading" element-loading-background="rgba(255, 255, 255, 0.8)"
						class="margin_t_30 pos_r animated bounceInDown">
						<div class="order margin_b_40 dflex_vertical_c">
							<div class="order_circle">总</div>
							<div class="pos_a order_right">
								<div class="order_title">总单数</div>
								<v-countup class="order_data" start-value="0" :end-value="orderSta.order_cnt">
								</v-countup>
							</div>
						</div>
						<div class="order margin_b_40 dflex_vertical_c">
							<div class="order_circle">单</div>
							<div class="pos_a order_right">
								<div class="order_title">客单价</div>
								<v-countup class="order_data price" start-value="0" :end-value="orderSta.average_cnt"
									:decimals="2"></v-countup>
							</div>
						</div>
						<div class="order margin_b_40 dflex_vertical_c">
							<div class="order_circle">支</div>
							<div class="pos_a order_right">
								<div class="order_title">支付数</div>
								<v-countup class="order_data" start-value="0" :end-value="orderSta.pay_cnt"></v-countup>
							</div>
						</div>
						<div class="order margin_b_40 dflex_vertical_c">
							<div class="order_circle">金</div>
							<div class="pos_a order_right">
								<div class="order_title">付款金额</div>
								<v-countup class="order_data ellipsis price" start-value="0"
									:end-value="orderSta.pay_money" :decimals="2"></v-countup>
							</div>
						</div>
						<div class="order margin_b_40 dflex_vertical_c">
							<div class="order_circle">退</div>
							<div class="pos_a order_right">
								<div class="order_title">退款数</div>
								<v-countup class="order_data" start-value="0" :end-value="orderSta.refund_cnt">
								</v-countup>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="19">
				<div class="separate_page area2">
					<div class="dflex_sb">
						<h3>日/月订单数</h3>
						<div>
							<el-button class="echarts-btn" size="mini" :class="{ active: orderCutBtn == '日' }"
								@click="orderDay" round>日</el-button>
							<el-button class="echarts-btn" size="mini" :class="{ active: orderCutBtn == '月' }"
								@click="orderMonth" round>月</el-button>
						</div>
					</div>
					<div id="order" class="h100 animated bounceInDown"></div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="16">
			<el-col :span="7">
				<div class="separate_page area3">
					<div class="dflex_sb">
						<h3>访客排行</h3>
						<el-select size="small" style="width: 100px;" class="state_search" v-model="visit"
							@change="visitChange">
							<el-option v-for="item in stateOptions" :key="item.value" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</div>
					<el-table height="400" v-loading="visitTableLoading"
						:data="visitTableDatas.filter(x => x.goods.state == visit || visit == '全部')"
						highlight-current-row class="margin_t_10 animated bounceInDown">
						<el-table-column label="访客数" align="center">
							<template slot-scope="scope">
								<div class="dflex_c">
									<div v-if="scope.row.hot < 3" class="iconfont iconhuo margin_r_5"></div>
									<div>{{ scope.row.visit }}</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="图片" align="center" width="80">
							<template slot-scope="scope">
								<use-carousel v-if="visitTableDatas" :width="70" :height="70"
									:imgs="scope.row.goods.imgs" :video="scope.row.goods.video"></use-carousel>
							</template>
						</el-table-column>
						<el-table-column label="名称" align="center" width="160">
							<template slot-scope="scope">
								<el-popover :open-delay="350" :close-delay="80" placement="right" trigger="hover"
									:content="scope.row.goods.name">
									<div slot="reference" class="ellipsis crpr">{{ scope.row.goods.name }}</div>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column property="goods.state" label="状态" align="center"></el-table-column>
						<div slot="empty">
							<el-empty description=" "></el-empty>
						</div>
					</el-table>
				</div>
			</el-col>
			<el-col :span="7">
				<div class="separate_page area3">
					<div class="dflex_sb">
						<h3>浏览排行</h3>
						<el-select size="small" style="width: 100px;" class="state_search" v-model="browse"
							@change="browseChange">
							<el-option v-for="item in stateOptions" :key="item.value" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</div>
					<el-table height="400" v-loading="browseTableLoading"
						:data="browseTableDatas.filter(x => x.goods.state == browse || browse == '全部')"
						highlight-current-row class="margin_t_10 animated bounceInDown">
						<el-table-column label="浏览数" align="center">
							<template slot-scope="scope">
								<div class="dflex_c">
									<div v-if="scope.row.hot < 3" class="iconfont iconhuo margin_r_5"></div>
									<div>{{ scope.row.browse }}</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="图片" align="center" width="80">
							<template slot-scope="scope">
								<use-carousel v-if="browseTableDatas" :width="70" :height="70"
									:imgs="scope.row.goods.imgs" :video="scope.row.goods.video"></use-carousel>
							</template>
						</el-table-column>
						<el-table-column label="名称" align="center" width="160">
							<template slot-scope="scope">
								<el-popover :open-delay="350" :close-delay="80" placement="right" trigger="hover"
									:content="scope.row.goods.name">
									<div slot="reference" class="ellipsis crpr">{{ scope.row.goods.name }}</div>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column property="goods.state" label="状态" align="center"></el-table-column>
						<div slot="empty">
							<el-empty description=" "></el-empty>
						</div>
					</el-table>
				</div>
			</el-col>
			<el-col :span="10">
				<div class="separate_page area3">
					<h3>商品类型分布</h3>
					<div id="goodsType" class="h100 animated bounceInDown"></div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<div class="separate_page margin_b_0 area4">
					<h3>用户省份分布</h3>
					<div id="member" class="h100 animated bounceInDown"></div>
				</div>
			</el-col>
		</el-row>
		<el-backtop target="uni-page-body"></el-backtop>
	</div>
</template>

<script>
	import vCountup from 'vue-countupjs';
	import echarts from 'echarts';
	import china from 'echarts/map/json/china.json';
	echarts.registerMap('china', china);
	export default {
		components: {
			vCountup
		},
		data() {
			return {
				memberLoading: false,
				memberSta: {
					member_cnt: 0,
					member_cnt_7: 0,
					member_cnt_yesterday: 0,
					member_cnt_today: 0,
					pay_cnt: 0,
					pay_money: 0
				},
				orderLoading: false,
				orderSta: {
					order_cnt: 0,
					average_cnt: 0,
					pay_cnt: 0,
					pay_money: 0,
					refund_cnt: 0
				},
				orderCutBtn: '日',
				orderDom: null,
				orderOption: [],
				visitTableLoading: false,
				visitTableDatas: [],
				browseTableLoading: false,
				browseTableDatas: [],
				stateOptions: [{
						value: '全部',
						label: '全部'
					},
					{
						value: '待审核',
						label: '待审核'
					},
					{
						value: '销售中',
						label: '销售中'
					},
					{
						value: '已下架',
						label: '已下架'
					}
				],
				visit: '全部',
				browse: '全部',
				goodsTypeDom: null,
				goodsTypeOption: [],
				mapData: [],
				memberDom: null,
				memberOption: []
			};
		},
		methods: {
			async getMember() {
				this.memberLoading = true;
				const res1 = this.$db['wmzmall-member']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id')
					})
					.groupBy('all')
					.groupField('count(*) as member_cnt')
					.get();

				const $ = this.$db.$cmd.aggregate;
				let today = new Date();
				today.setTime(today.getTime() - 24 * 60 * 60 * 1000 * 7);
				const res2 = this.$db['wmzmall-member']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id'),
						create_time: $.gt(today.getTime())
					})
					.groupBy('all')
					.groupField('count(*) as member_cnt_7')
					.get();

				today = new Date();
				today.setTime(today.getTime() - 24 * 60 * 60 * 1000);
				const res3 = this.$db['wmzmall-member']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id'),
						yy_mm_dd: today.format('yyyy年MM月dd日')
					})
					.groupBy('all')
					.groupField('count(*) as member_cnt_yesterday')
					.get();

				today = new Date();
				const res4 = this.$db['wmzmall-member']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id'),
						yy_mm_dd: today.format('yyyy年MM月dd日')
					})
					.groupBy('all')
					.groupField('count(*) as member_cnt_today')
					.get();

				const res5 = this.$db['wmzmall-order']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id'),
						yy_mm_dd: today.format('yyyy年MM月dd日'),
						order_pay_state: '已付款'
					})
					.groupBy('all')
					.groupField('count(*) as pay_cnt, sum(order_actural_paid) as pay_money')
					.get();

				await Promise.all([res1, res2, res3, res4, res5])
					.then(res => {
						this.memberSta = {
							...this.memberSta,
							...res[0].result.data[0],
							...res[1].result.data[0],
							...res[2].result.data[0],
							...res[3].result.data[0],
							...res[4].result.data[0]
						};
					})
					.catch(err => {
						this.memberLoading = false;
					});

				this.memberLoading = false;

				this.memberSta.pay_money = this.memberSta.pay_money / 100;
			},
			async getOrder() {
				this.orderLoading = true;
				const res1 = this.$db['wmzmall-order']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id'),
						is_delete: 0
					})
					.groupBy('is_delete')
					.groupField('count(*) as order_cnt')
					.get();

				const res2 = this.$db['wmzmall-order']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id'),
						is_delete: 0,
						order_pay_state: '已付款'
					})
					.groupBy('is_delete')
					.groupField('count(*) as pay_cnt, sum(order_actural_paid) as pay_money')
					.get();

				const res3 = this.$db['wmzmall-order']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id'),
						is_delete: 0,
						order_refund_state: '已退款'
					})
					.groupBy('is_delete')
					.groupField('count(*) as refund_cnt')
					.get();

				await Promise.all([res1, res2, res3])
					.then(res => {
						this.orderSta = {
							...this.orderSta,
							...res[0].result.data[0],
							...res[1].result.data[0],
							...res[2].result.data[0]
						};
					})
					.catch(err => {
						this.orderLoading = false;
					});

				this.orderLoading = false;

				this.orderSta.average_cnt = this.orderSta.pay_money / 100 / this.orderSta.pay_cnt || 0;
				this.orderSta.pay_money = this.orderSta.pay_money / 100;
			},
			async orderDay() {
				this.orderCutBtn = '日';

				uni.setStorage({
					key: '__orderCutSta' + this.$route.path,
					data: this.orderCutBtn
				});

				this.orderDom.showLoading({
					text: '加载中 · · ·',
					color: '#ff6a6c',
					textColor: '#000',
					maskColor: 'rgba(255, 255, 255, 1)'
				});

				const res1 = this.$db['wmzmall-order']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id')
					})
					.groupBy('dateToString(add(new Date(0),create_time),"%Y年%m月%d日","+0800") as time')
					.groupField('count(*) as order_cnt')
					.orderBy('time desc')
					.limit(30)
					.get();

				const res2 = this.$db['wmzmall-order']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id'),
						is_delete: 0,
						order_pay_state: '已付款'
					})
					.groupBy('dateToString(add(new Date(0),create_time),"%Y年%m月%d日","+0800") as time')
					.groupField('count(*) as pay_cnt, sum(order_actural_paid) as pay_money')
					.orderBy('time desc')
					.limit(30)
					.get();

				let res = {
					code: 0,
					datas: []
				};

				await Promise.all([res1, res2])
					.then(resData => {
						let data = {};
						resData[0].result.data.forEach(x => {
							data = {
								...x,
								...resData[1].result.data.find(p => p.time == x.time)
							};
							res.datas.push(data);
						});
					})
					.catch(err => {
						this.orderDom.hideLoading();
					});

				this.orderDom.hideLoading();

				this.orderOption.xAxis.data = [];
				this.orderOption.series[0].data = [];
				this.orderOption.series[1].data = [];

				let today;
				let todaystr;
				for (let i = 30; i >= 0; i--) {
					today = new Date();
					today.setTime(today.getTime() - 1000 * 60 * 60 * 24 * i);
					todaystr = today.format('yyyy年MM月dd日');

					let data = res.datas.find(x => x.time == todaystr) || {};

					this.orderOption.series[0].data.push({
						value: data.order_cnt || 0,
						name: todaystr
					});

					this.orderOption.series[1].data.push({
						value: data.pay_cnt || 0,
						money: data.pay_money / 100 || 0
					});
					this.orderOption.xAxis.data.push({
						value: today.format('dd')
					});
				}

				this.orderDom.setOption(this.orderOption);
			},
			async orderMonth() {
				this.orderCutBtn = '月';

				uni.setStorage({
					key: '__orderCutSta' + this.$route.path,
					data: this.orderCutBtn
				});

				this.orderDom.showLoading({
					text: '加载中 · · ·',
					color: '#ff6a6c',
					textColor: '#000',
					maskColor: 'rgba(255, 255, 255, 1)'
				});

				const res1 = this.$db['wmzmall-order']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id')
					})
					.groupBy('dateToString(add(new Date(0),create_time),"%Y年%m月","+0800") as time')
					.groupField('count(*) as order_cnt')
					.orderBy('time desc')
					.limit(12)
					.get();

				const res2 = this.$db['wmzmall-order']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id'),
						is_delete: 0,
						order_pay_state: '已付款'
					})
					.groupBy('dateToString(add(new Date(0),create_time),"%Y年%m月","+0800") as time')
					.groupField('count(*) as pay_cnt, sum(order_actural_paid) as pay_money')
					.orderBy('time desc')
					.limit(12)
					.get();

				let res = {
					code: 0,
					datas: []
				};

				await Promise.all([res1, res2])
					.then(resData => {
						let data = {};
						resData[0].result.data.forEach(x => {
							data = {
								...x,
								...resData[1].result.data.find(p => p.time == x.time)
							};
							res.datas.push(data);
						});
					})
					.catch(err => {
						this.orderDom.hideLoading();
					});

				this.orderDom.hideLoading();

				this.orderOption.xAxis.data = [];
				this.orderOption.series[0].data = [];
				this.orderOption.series[1].data = [];

				let today;
				let todaystr;
				for (let i = 11; i >= 0; i--) {
					today = new Date();
					today.setDate(1);
					today.setMonth(today.getMonth() - i);
					todaystr = today.format('yyyy年MM月');

					let data = res.datas.find(x => x.time == todaystr) || {};

					this.orderOption.series[0].data.push({
						value: data.order_cnt || 0,
						name: todaystr
					});

					this.orderOption.series[1].data.push({
						value: data.pay_cnt || 0,
						money: data.pay_money / 100 || 0
					});
					this.orderOption.xAxis.data.push({
						value: today.format('MM')
					});
				}

				this.orderDom.setOption(this.orderOption);
			},
			orderCharts(callback) {
				this.orderDom = this.$echarts.init(document.getElementById('order'));

				this.orderOption = {
					backgroundColor: '#fff',
					grid: {
						top: '50px',
						bottom: '60px',
						left: '30px',
						right: '10px'
					},
					tooltip: {
						trigger: 'axis',
						label: {
							show: true
						},
						formatter: function(params) {
							let str = '';

							str += ' ' + params[0].data.name + '    ' + '\n';
							params.forEach(item => {
								if (item.seriesName === '订单数') {
									str += ' ' + item.seriesName + ': ' + item.data.value + '' + '\n';
								} else if (item.seriesName === '支付数') {
									str += ' ' + item.seriesName + ': ' + item.data.value + '' + '\n';
									str += ' ' + '支付金额' + ': ￥' + item.data.money + '   ';
								}
							});
							return str;
						}
					},
					legend: {
						data: ['订单数', '支付数'],
						top: '0%',
						textStyle: {
							color: '#000'
						}
					},
					xAxis: {
						axisLine: {
							show: false
						},
						splitLine: {
							show: false
						},
						axisTick: {
							show: true,
							alignWithLabel: true,
							lineStyle: {
								color: '#ccc'
							}
						},
						data: []
					},
					yAxis: {
						axisLine: {
							show: false
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(0, 0, 0, 0.1)'
							}
						},
						axisTick: {
							show: false
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: 'rgba(0, 0, 0, 0)'
							}
						}
					},
					series: [{
							smooth: true,
							name: '订单数',
							type: 'line',
							symbol: 'circle',
							symbolSize: 4,
							showSymbol: false,
							lineStyle: {
								width: 3,
								color: '#ff6a6c',
								shadowColor: 'rgba(255, 106, 108, 0.6)',
								shadowBlur: 10,
								shadowOffsetY: 20
							},
							itemStyle: {
								color: '#ff6a6c'
							},
							data: []
						},
						{
							smooth: true,
							name: '支付数',
							type: 'line',
							symbol: 'circle',
							symbolSize: 4,
							showSymbol: false,
							lineStyle: {
								width: 3,
								color: '#69b5ff',
								shadowColor: 'rgba(105, 181, 255, 0.6)',
								shadowBlur: 10,
								shadowOffsetY: 20
							},
							itemStyle: {
								color: '#69b5ff'
							},
							data: []
						}
					]
				};

				window.addEventListener('resize', () => {
					this.orderDom.resize();
				});

				if (typeof callback === 'function') {
					callback();
				}
			},
			async getVisit() {
				this.visitTableLoading = true;
				const res1 = this.$db['wmzmall-goods-history, wmzmall-goods']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id')
					})
					.groupBy('goods')
					.groupField('count(*) as visit')
					.orderBy('visit desc')
					.get();

				const resData = await Promise.all([res1]);

				this.visitTableLoading = false;

				let res = {
					code: 0,
					datas: []
				};

				resData[0].result.data.forEach((x, idx) => {
					if (x.goods.length > 0) {
						res.datas.push({
							goods: x.goods[0],
							visit: x.visit,
							hot: idx
						});
					}
				});

				if (res.datas.length > 0) {
					res.code = 200;
				}

				if (res.code == 200) {
					this.visitTableDatas = res.datas;
				}
			},
			async getBrowse() {
				this.browseTableLoading = true;
				const res1 = this.$db['wmzmall-goods-history, wmzmall-goods']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id')
					})
					.groupBy('goods')
					.groupField('sum(visit_cnt) as browse')
					.orderBy('browse desc')
					.get();

				const resData = await Promise.all([res1]);

				this.browseTableLoading = false;

				let res = {
					code: 0,
					datas: []
				};

				resData[0].result.data.forEach((x, idx) => {
					if (x.goods.length > 0) {
						res.datas.push({
							goods: x.goods[0],
							browse: x.browse,
							hot: idx
						});
					}
				});

				if (res.datas.length > 0) {
					res.code = 200;
				}

				if (res.code == 200) {
					this.browseTableDatas = res.datas;
				}
			},
			visitChange() {
				uni.setStorage({
					key: '__visitCutSta' + this.$route.path,
					data: this.visit
				});
			},
			browseChange() {
				uni.setStorage({
					key: '__browseCutSta' + this.$route.path,
					data: this.browse
				});
			},
			async goodsTypeData() {
				this.goodsTypeDom.showLoading({
					text: '加载中 · · ·',
					color: '#ff6a6c',
					textColor: '#000',
					maskColor: 'rgba(255, 255, 255, 1)'
				});

				const res1 = this.$db['wmzmall-goods']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id')
					})
					.groupBy('state')
					.groupField('count(*) as cnt')
					.get();

				const $ = this.$db.$cmd.aggregate;
				const res2 = this.$db['wmzmall-goods, wmzmall-goods-category']
					.collection()
					.action('base-where-action') 
					.aggregate()
					.match({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id')
					})
					.group({
						_id: '$cid',
						cnt: $.sum(1)
					})
					.end();

				const resData = await Promise.all([res1, res2]);

				this.goodsTypeDom.hideLoading();

				let state = {
					code: 0,
					datas: []
				};

				let category = {
					code: 0,
					datas: []
				};

				resData[0].result.data.forEach(x => {
					state.datas.push({
						cnt: x.cnt,
						state: x.state
					});
				});

				resData[1].result.data.forEach(x => {
					category.datas.push({
						cnt: x.cnt,
						name: x._id[0] && x._id[0].name
					});
				});

				if (state.datas.length > 0) {
					state.code = 200;
				}

				if (state.code == 200) {
					state.datas.forEach(x => {
						this.goodsTypeOption.series[0].data.push({
							value: x.cnt,
							name: x.state
						});
					});
				}

				if (category.datas.length > 0) {
					category.code = 200;
				}

				if (category.code == 200) {
					category.datas.forEach(x => {
						this.goodsTypeOption.series[1].data.push({
							value: x.cnt,
							name: x.name
						});
					});
				}
				this.goodsTypeDom.setOption(this.goodsTypeOption);
			},
			goodsTypeCharts(callback) {
				this.goodsTypeDom = this.$echarts.init(document.getElementById('goodsType'));

				this.goodsTypeOption = {
					backgroundColor: '#fff',
					color: [
						'#2ec7c9',
						'#b6a2de',
						'#5ab1ef',
						'#ffb980',
						'#d87a80',
						'#8d98b3',
						'#FFEA01',
						'#B8D07C',
						'#fca4bb',
						'#dc69aa',
						'#07a2a4',
						'#9a7fd1',
						'#588dd5',
						'#f5994e',
						'#c05050',
						'#59678c',
						'#c9ab00',
						'#7eb00a',
						'#6f5553',
						'#c14089'
					],
					tooltip: {
						trigger: 'item',
						formatter: ' {a}   \n {b}: {c}   '
					},
					series: [{
							name: '商品状态',
							type: 'pie',
							radius: ['0', '36%'],
							itemStyle: {
								normal: {
									borderColor: 'rgba(0, 0, 0, 0)'
								}
							},
							label: {
								position: 'inside'
							},
							data: []
						},
						{
							name: '商品分类',
							type: 'pie',
							radius: ['45%', '55%'],
							labelLine: {
								length2: 90,
								lineStyle: {
									color: 'rgba(0, 0, 0, 0.1)'
								}
							},
							label: {
								formatter: params => {
									return '{icon|●}{name|' + params.name + '}{value|' + params.value + '}';
								},
								padding: [0, -70, 16, -70],
								rich: {
									color: '#333',
									icon: {
										fontSize: 16
									},
									name: {
										fontSize: 14,
										padding: [0, 5, 0, 5],
										color: '#666666'
									},
									percent: {
										color: '#333',
										padding: [0, 5, 0, 0]
									},
									value: {
										fontSize: 16,
										color: '#333333'
									}
								}
							},
							data: []
						}
					]
				};

				window.addEventListener('resize', () => {
					this.goodsTypeDom.resize();
				});

				if (typeof callback === 'function') {
					callback();
				}
			},
			async memberData() {
				this.memberDom.showLoading({
					text: '加载中 · · ·',
					color: '#ff6a6c',
					textColor: '#000',
					maskColor: 'rgba(255, 255, 255, 1)'
				});

				const res1 = this.$db['wmzmall-member']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id')
					})
					.groupBy('member_city')
					.groupField('count(*) as cnt')
					.get();

				let res = {
					code: 0,
					datas: []
				};

				await Promise.all([res1]).then(resData => {
					resData[0].result.data.forEach(x => {
						if (!x.member_city) return false;
						let _cnt = x.cnt;
						let _pro = x.member_city.split('-')[1];
						let _data = res.datas.find(d => d.pro == _pro);
						if (_data) {
							_data.cnt += _cnt;
							return false;
						}

						res.datas.push({
							pro: _pro,
							cnt: _cnt
						});
					});
				}).catch(err =>{
					this.memberDom.hideLoading();
				})

				this.memberDom.hideLoading();

				this.mapData.forEach(_ => {
					let _pro = res.datas.find(x => x.pro == _.name);
					if (_pro) {
						_.value = _pro.cnt;
					} else {
						_.value = 0;
					}
				});
				this.memberDom.setOption(this.memberOption);
			},
			memberCharts(callback) {
				this.memberDom = this.$echarts.init(document.getElementById('member'));

				this.mapData = [{
						name: '南海诸岛',
						value: 0
					},
					{
						name: '北京',
						value: 0
					},
					{
						name: '天津',
						value: 0
					},
					{
						name: '上海',
						value: 0
					},
					{
						name: '重庆',
						value: 0
					},
					{
						name: '河北',
						value: 0
					},
					{
						name: '河南',
						value: 0
					},
					{
						name: '云南',
						value: 0
					},
					{
						name: '辽宁',
						value: 0
					},
					{
						name: '黑龙江',
						value: 0
					},
					{
						name: '湖南',
						value: 0
					},
					{
						name: '安徽',
						value: 0
					},
					{
						name: '山东',
						value: 0
					},
					{
						name: '新疆',
						value: 0
					},
					{
						name: '江苏',
						value: 0
					},
					{
						name: '浙江',
						value: 0
					},
					{
						name: '江西',
						value: 0
					},
					{
						name: '湖北',
						value: 0
					},
					{
						name: '广西',
						value: 0
					},
					{
						name: '甘肃',
						value: 0
					},
					{
						name: '山西',
						value: 0
					},
					{
						name: '内蒙古',
						value: 0
					},
					{
						name: '陕西',
						value: 0
					},
					{
						name: '吉林',
						value: 0
					},
					{
						name: '福建',
						value: 0
					},
					{
						name: '贵州',
						value: 0
					},
					{
						name: '广东',
						value: 0
					},
					{
						name: '青海',
						value: 0
					},
					{
						name: '西藏',
						value: 0
					},
					{
						name: '四川',
						value: 0
					},
					{
						name: '宁夏',
						value: 0
					},
					{
						name: '海南',
						value: 0
					},
					{
						name: '台湾',
						value: 0
					},
					{
						name: '香港',
						value: 0
					},
					{
						name: '澳门',
						value: 0
					}
				];

				this.memberOption = {
					tooltip: {
						show: true,
						formatter: function(e) {
							return 0 == e.value ? ' ' + e.name + ': 暂无用户' + '   ' : ' ' + e.seriesName + '   ' +
								'\n' + ' ' + e.name + ': ' + e.value + '   ';
						}
					},
					visualMap: {
						min: 0,
						max: 1000,
						left: 10,
						bottom: 40,
						showLabel: !0,
						text: ['高', '低'],
						pieces: [{
								gt: 200,
								label: '> 200 人',
								color: 'rgba(255, 106, 108, 0.7)'
							},
							{
								gt: 100,
								lte: 200,
								label: '< 200 人',
								color: 'rgba(255, 106, 108, 0.54)'
							},
							{
								gte: 10,
								lte: 100,
								label: '< 100 人',
								color: 'rgba(255, 106, 108, 0.3)'
							},
							{
								gte: 1,
								lt: 10,
								label: '< 10 人',
								color: 'rgba(255, 106, 108, 0.14)'
							},
							{
								value: 0,
								label: '0 人',
								color: 'rgba(255, 106, 108, 0)'
							}
						],
						show: true
					},
					geo: {
						map: 'china',
						roam: !1,
						scaleLimit: {
							min: 1,
							max: 2
						},
						zoom: 1.2,
						top: 60,
						label: {
							show: true
						},
						itemStyle: {
							borderColor: 'rgba(0, 0, 0, 0.24)',
							emphasis: {
								areaColor: 'rgba(255, 106, 108, 1)'
							}
						}
					},
					series: [{
						name: '用户人数',
						type: 'map',
						geoIndex: 0,
						data: this.mapData
					}]
				};

				window.addEventListener('resize', () => {
					this.memberDom.resize();
				});

				if (typeof callback === 'function') {
					callback();
				}
			}
		},
		created() {
			this.getMember();
			this.getOrder();
			this.getVisit();
			this.visit = uni.getStorageSync('__visitCutSta' + this.$route.path) || '全部';
			this.getBrowse();
			this.browse = uni.getStorageSync('__browseCutSta' + this.$route.path) || '全部';
		},
		mounted() {
			this.orderCharts(() => {
				const orderSta = uni.getStorageSync('__orderCutSta' + this.$route.path) || '日';
				if (orderSta == '日') {
					this.orderDay();
				} else {
					this.orderMonth();
				}
			});

			this.goodsTypeCharts(() => {
				this.goodsTypeData();
			});

			this.memberCharts(() => {
				this.memberData();
			});

			this.$nextTick(() => {
				this.$api.scrollOnStorage('uni-page-body', this.$route.path);
			});

			this.$nextTick(() => {
				this.$api.scrollToStorage('uni-page-body', this.$route.path);
			});
		}
	};
</script>

<style>
	.tag {
		margin-top: 30px;
		width: 12%;
		height: 90px;
		background-color: #7d6aff;
		border-radius: 10px;
		margin-right: 2%;
		padding-left: 2%;
		display: flex;
		align-items: center;
		color: #fff;
		cursor: pointer;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.tag:nth-child(2) {
		background-color: #ffa66a;
	}

	.tag:nth-child(3) {
		background-color: #ff6b6b;
	}

	.tag:nth-child(4) {
		background-color: #69b5ff;
	}

	.tag:nth-child(5) {
		background-color: #b96bff;
	}

	.tag:nth-child(6) {
		background-color: #e9c52b;
	}

	.tag i {
		font-size: 32px;
		margin-right: 14px;
		transition: transform 0.2s;
	}

	.tag_title {
		font-size: 13px;
	}

	.tag_data {
		font-size: 22px;
		font-weight: 400;
	}

	.order {
		cursor: pointer;
	}

	.order_circle {
		font-size: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		margin-left: 10px;
		background-color: #ff6b6b;
		transition: transform 0.2s;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.order:nth-child(2) .order_circle {
		background-color: #7e6aff;
	}

	.order:nth-child(3) .order_circle {
		background-color: #69b5ff;
	}

	.order:nth-child(4) .order_circle {
		background-color: #ffa66a;
	}

	.order:nth-child(5) .order_circle {
		margin-bottom: 0;
		background-color: #b96bff;
	}

	.order_right {
		left: 90px;
	}

	.order_title {
		font-size: 13px;
	}

	.order_data {
		font-size: 22px;
	}

	.tag:hover i,
	.order:hover .order_circle {
		transform: scale(1.2);
	}

	.price {
		color: #000;
	}

	.area2 {
		height: 600px;
	}

	.area3 {
		height: 500px;
	}

	.area4 {
		height: 600px;
	}

	.ellipsis {
		width: 150px;
	}

	.area3 .iconhuo {
		color: rgba(255, 106, 108, 1);
	}
</style>
